/* * @Author: Zhengxuan Ye * @Date: 2025-05-06 21:27:42 * @Last Modified by: Zhengxuan Ye * @Last
Modified time: 2025-05-06 21:27:42 */

<template>
  <div class="exhibition">
    <div class="container">
      <div class="page-header">
        <h1>非物质文化遗产展示与传承</h1>
        <p>
          展示是保护的重要途径，传承是保护的根本目的。通过多种形式的展示活动，让非物质文化遗产走进大众视野，促进传承发展。
        </p>
      </div>

      <!-- 展览推荐部分 -->
      <section class="exhibition-section">
        <h2 class="section-title">精品展览推荐</h2>
        <div class="exhibitions-grid">
          <div v-for="exhibition in exhibitions" :key="exhibition.id" class="exhibition-card">
            <div class="exhibition-image">
              <img :src="exhibition.image" :alt="exhibition.title" />
              <div class="image-source">图片来源: {{ exhibition.source }}</div>
            </div>
            <div class="exhibition-content">
              <h3>{{ exhibition.title }}</h3>
              <div class="exhibition-meta">
                <span class="meta-item"><i class="icon">📅</i> {{ exhibition.date }}</span>
                <span class="meta-item"><i class="icon">📍</i> {{ exhibition.location }}</span>
              </div>
              <p class="exhibition-desc">
                {{ exhibition.description }}
              </p>
              <a href="#" class="btn-more">了解详情</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 参与体验部分 -->
      <section class="experience-section">
        <h2 class="section-title">非遗体验活动</h2>
        <p class="section-desc">
          通过亲身参与，更深入地了解非物质文化遗产，感受传统工艺的魅力。以下是近期可参与的非遗体验活动：
        </p>

        <div class="experience-list">
          <div class="experience-item">
            <div class="experience-icon">🎭</div>
            <div class="experience-content">
              <h3>京剧脸谱绘制工作坊</h3>
              <p>
                在专业京剧脸谱艺术家的指导下，学习京剧脸谱的基本知识和绘制技巧，亲手完成一个简单的京剧脸谱作品。
              </p>
              <div class="experience-info">
                <span>时间：每周日 14:00-16:00</span>
                <span>地点：北京戏曲博物馆</span>
                <span>费用：60元/人（含材料费）</span>
              </div>
              <div class="login-notice">
                <a v-if="!isLoggedIn" href="/login" class="btn-register">登录后报名</a>
                <button v-else class="btn-register">立即报名</button>
              </div>
            </div>
          </div>

          <div class="experience-item">
            <div class="experience-icon">🧶</div>
            <div class="experience-content">
              <h3>苏绣体验课</h3>
              <p>
                由苏绣传承人亲自授课，教授基础的苏绣针法和技巧，适合零基础爱好者参加，可完成一个小型绣品带回家。
              </p>
              <div class="experience-info">
                <span>时间：每周六 10:00-12:00</span>
                <span>地点：苏州刺绣研究所</span>
                <span>费用：80元/人（含材料费）</span>
              </div>
              <div class="login-notice">
                <a v-if="!isLoggedIn" href="/login" class="btn-register">登录后报名</a>
                <button v-else class="btn-register">立即报名</button>
              </div>
            </div>
          </div>

          <div class="experience-item">
            <div class="experience-icon">🍵</div>
            <div class="experience-content">
              <h3>传统茶艺文化体验</h3>
              <p>
                了解中国茶道的历史和文化内涵，学习基本的泡茶技艺，品尝不同种类的中国传统名茶，感受茶文化的独特韵味。
              </p>
              <div class="experience-info">
                <span>时间：每日 15:00-17:00</span>
                <span>地点：中国茶文化中心</span>
                <span>费用：100元/人（含茶叶）</span>
              </div>
              <div class="login-notice">
                <a v-if="!isLoggedIn" href="/login" class="btn-register">登录后报名</a>
                <button v-else class="btn-register">立即报名</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 数字化展示部分 -->
      <section class="digital-section">
        <h2 class="section-title">数字化展示平台</h2>
        <div class="digital-content">
          <div class="digital-text">
            <p>
              随着科技的发展，非物质文化遗产的展示与传承也呈现出数字化、智能化的趋势。通过数字技术，可以更立体地展示非遗项目，打破时空限制，让更多人了解和感受非遗魅力。
            </p>
            <h3>线上资源推荐</h3>
            <ul class="digital-resources">
              <li>
                <strong>中国非物质文化遗产数字博物馆</strong>
                <p>提供丰富的非遗数字资源，包括视频、图片、3D模型等</p>
                <a href="#" class="resource-link">访问网站</a>
              </li>
              <li>
                <strong>非遗在线学习平台</strong>
                <p>提供各类非遗技艺的在线教学课程，足不出户学习传统工艺</p>
                <a href="#" class="resource-link">访问网站</a>
              </li>
              <li>
                <strong>非遗VR体验</strong>
                <p>通过VR技术，沉浸式体验非物质文化遗产项目</p>
                <a href="#" class="resource-link">了解更多</a>
              </li>
            </ul>
          </div>
          <div class="digital-image">
            <img :src="digitalPlatform.image" alt="数字化展示平台" />
            <div class="image-source">图片来源: {{ digitalPlatform.source }}</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useUserStore } from '../stores/user'
import pic1 from '../assets/displayAndInheritance/pic1.jpg' // 中国传统工艺精品展
import pic2 from '../assets/displayAndInheritance/pic2.jpg' // 非遗音乐会
import pic3 from '../assets/displayAndInheritance/pic3.jpg' // 文化遗产节
import pic4 from '../assets/displayAndInheritance/pic4.png' // 数字化展示平台

export default {
  name: 'ExhibitionView',
  setup() {
    const userStore = useUserStore()
    const isLoggedIn = computed(() => userStore.isLoggedIn)

    return {
      isLoggedIn,
      userStore,
    }
  },
  data() {
    return {
      exhibitions: [
        {
          id: 1,
          title: '中国传统工艺精品展',
          image: pic1,
          date: '2023.6.10-2023.9.10',
          location: '中国国家博物馆',
          description:
            '本展览汇集了来自全国各地的200余件传统工艺精品，涵盖陶瓷、漆器、刺绣、木雕等多个门类，全面展示中国传统工艺的精湛技术和文化内涵。',
          source: '中国工艺美术馆',
        },
        {
          id: 2,
          title: '非遗音乐会：丝竹之声',
          image: pic2,
          date: '每周六 19:30',
          location: '国家大剧院',
          description:
            '来自全国各地的传统音乐传承人带来精彩演出，包括昆曲、京剧、南音、广东音乐等多种传统音乐形式，让观众近距离感受非物质文化遗产的魅力。',
          source: '中国非物质文化遗产网',
        },
        {
          id: 3,
          title: '中国非物质文化遗产节',
          image: pic3,
          date: '2023.6.8-6.14',
          location: '全国多地同时举办',
          description:
            '每年文化和自然遗产日期间举办的大型主题活动，包括展览、表演、讲座、工作坊等多种形式，是了解和体验非遗的绝佳机会。',
          source: '中国成都非物质文化遗产节',
        },
      ],
      digitalPlatform: {
        image: pic4,
        source: '中国非物质文化遗产网',
      },
    }
  },
}
</script>

<style scoped>
.exhibition {
  padding: 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.page-header p {
  color: #666;
  max-width: 800px;
  margin: 0 auto;
}

/* 通用部分样式 */
.section-title {
  font-size: 1.8rem;
  color: var(--dark-color);
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.section-desc {
  color: #666;
  margin-bottom: 30px;
}

.exhibition-section,
.experience-section,
.digital-section {
  margin-bottom: 60px;
}

/* 展览推荐部分 */
.exhibitions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.exhibition-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: var(--transition);
}

.exhibition-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.exhibition-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.exhibition-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.exhibition-card:hover .exhibition-image img {
  transform: scale(1.05);
}

.image-source {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.7rem;
  padding: 4px 8px;
  text-align: right;
}

.exhibition-content {
  padding: 20px;
}

.exhibition-content h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.exhibition-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
  color: #666;
  font-size: 0.9rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon {
  font-size: 1.1rem;
}

.exhibition-desc {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #444;
}

.btn-more {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  transition: var(--transition);
}

.btn-more:hover {
  color: #b42c2c;
  text-decoration: underline;
}

/* 参与体验部分 */
.experience-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.experience-item {
  display: flex;
  gap: 20px;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 25px;
  transition: var(--transition);
}

.experience-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.experience-icon {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
}

.experience-content {
  flex: 1;
}

.experience-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.experience-content p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #444;
}

.experience-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #666;
}

.login-notice {
  font-size: 0.9rem;
  color: #666;
}

.btn-register {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
}

.btn-register:hover {
  background-color: #b42c2c;
}

/* 数字化展示部分 */
.digital-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.digital-text {
  flex: 1;
}

.digital-text p {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #444;
}

.digital-text h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: var(--dark-color);
}

.digital-resources {
  list-style: none;
  padding: 0;
}

.digital-resources li {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.digital-resources li strong {
  display: block;
  margin-bottom: 5px;
  color: var(--dark-color);
}

.digital-resources li p {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.resource-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
}

.resource-link:hover {
  text-decoration: underline;
}

.digital-image {
  flex: 1;
  height: 350px;
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
}

.digital-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
  transition: transform 0.3s ease;
}

.digital-image:hover img {
  transform: scale(1.03);
}

/* 响应式调整 */
@media (max-width: 992px) {
  .digital-content {
    flex-direction: column;
  }

  .digital-image {
    width: 100%;
    height: 250px;
    order: -1;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .experience-item {
    flex-direction: column;
  }

  .experience-icon {
    margin-bottom: 10px;
  }

  .exhibitions-grid {
    grid-template-columns: 1fr;
  }
}
</style>
